<template>
	<view class="wrap">
		<view class="header">
			<view class="header-title">登录</view>
			<view class="header-desc">
				<text>还没有账号，立即 </text>
				<text @click="onSkipTap('openNewStore')">申请入驻</text>
			</view>
		</view>
		<view class="form">
			<u-form :model="form" label-position="top">
				<u-form-item label="手机号">
					<u-input type="number" v-model="form.name" placeholder="请输入手机号" />
				</u-form-item>
				<view class="divider"></view>
				<u-form-item label="密码">
					<u-input v-model="form.password" type="password" placeholder="请输入密码" />
				</u-form-item>
				<view class="agreement">
					<icon type="success" size="15" color="#3377FF"></icon>
					<text>我已阅读并同意</text>
					<text>《用户协议》</text>
				</view>
				<view class="btn" @click="onConfirmTap">登录</view>
			</u-form>
		</view>
		<view class="footer" @click="onSkipTap('forgetPwd')">忘记密码</view>
	</view>
</template>

<script>
	import imUtil from '../../utils/imUtil'
	let WebIM = require("@/utils/WebIM.js")["default"];
	export default {
		data() {
			return {
				form: {
					name: '',
					password: ''
				}
			}
		},
		onLoad(options) {
			this.$g_util.logoutOnLoginPage()
		},
		methods: {
			onSkipTap(type, index) {
				const urlObj = {
					home: () => {
						uni.navigateTo({
							url: '/pages/home/index'
						})
					},
					forgetPwd: '/pages/login/forgetPwd',
					openNewStore: '/pages/apply/openNewStore',
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			onConfirmTap() {
				if (!this.form.name) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none',
					})
					return
				}
				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
					})
					return
				}
				uni.showLoading({
					title: '登录中...'
				})
				let params = {
					tel: this.form.name,
					password: this.form.password,
					category: 2, // 1用户 2商户
				}
				let register_id = uni.getStorageSync('register_id')
				if (register_id) {
					params.registrationId = register_id
				}
				// console.log(params);
				this.$g_api.authLoginPassword(params).then(async ({
					data
				}) => {
					try {
						uni.setStorageSync('token', data.token)
						uni.setStorageSync('expires', data.expires)

						await this.$store.dispatch('updateUserInfo')
						if (data.imUserName && data.imToken) {
							uni.setStorageSync('imToken', data.imToken)
							uni.setStorageSync('imUserName', data.imUserName)
							uni.setStorageSync('myUsername', data.imUserName)
							
							getApp().globalData.conn.open({
							    apiUrl: WebIM.config.apiURL,
							    user: data.imUserName,
							    pwd: '123456',
							    grant_type: this.grant_type,
							    appKey: WebIM.config.appkey
							});
							
							// imUtil.loginImBytoken(data.imUserName, data.imToken)
						}
						this.onSkipTap('home')
					} catch (e) {
						console.log(e);
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},

		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	/deep/ .u-form-item {
		padding: 0 !important;
	}

	/deep/ .u-input__input {
		height: 88rpx;
	}

	/deep/ .u-form-item--left__content__label {
		height: 30rpx;
	}

	/deep/ .u-border-bottom {
		&::after {
			border-bottom: 2px solid #e6e6e6;
		}
	}

	/deep/ .u-form-item--left {
		margin-bottom: 0 !important;
	}

	.wrap {
		padding: 30rpx 70rpx 0;
	}

	.header {
		margin-bottom: 98rpx;
	}

	.header-title {
		margin-bottom: 30rpx;
		font-size: 48rpx;
		line-height: 50rpx;
		margin-bottom: 28rpx;
		font-weight: bold;
	}

	.header-desc {
		text {
			&:first-child {
				color: #999;
			}

			&:nth-child(2) {
				margin-left: 6rpx;
				font-weight: bold;
				color: #3377FF;
			}
		}
	}

	.form {}

	.divider {
		height: 50rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		font-size: 24rpx;

		text {
			&:nth-of-type(1) {
				margin-left: 10rpx;
			}

			&:nth-of-type(2) {
				color: #3377FF;
			}
		}
	}

	.btn {
		margin-top: 80rpx;
		width: 610rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #fff;
		text-align: center;
		background: linear-gradient(90deg, #B2CCFF, #80AAFF);
		box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(128, 170, 255, 0.5);
		border-radius: 46rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 5vh;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		color: #999;
	}
</style>